<template>

  <el-tabs type="border-card" @tab-click="handleClick">
  <el-tab-pane label="Base">
  	<template>
			<div class="spread con customer_index">
				<div>
					<div style="margin-top:10px;">
						<el-button  type="danger" icon="el-icon-tickets" @click="BaseEdit()">Edit</el-button>
					</div>
				</div>
				
				<!-- Base Edit -->
				<el-dialog title="Base Edit" :visible.sync="editBasedialogFormVisible">
				  <el-form :model="editBaseform" :rules="rules" ref="editBaseform" >
					  <el-form-item label="CompanyAlias" prop="CompanyAlias" :label-width="formLabelWidth">
					   <el-input v-model="editBaseform.CompanyAlias"></el-input>
					  </el-form-item>
				     <el-form-item label="CompanyName" prop="CompanyName" :label-width="formLabelWidth">
				      <el-input v-model="editBaseform.CompanyName" ></el-input>
				    </el-form-item>
				    <el-form-item label="CompanyName2" :label-width="formLabelWidth">
					   <el-input v-model="editBaseform.CompanyName2" ></el-input>
					 </el-form-item>
						 
					<el-form-item label="Country"   prop="CountryID" :label-width="formLabelWidth">
					  <el-col :span="3">
					   <el-input v-model="editBaseform.City"></el-input>
					  </el-col>
					  
				  	 <el-col class="line" :span="1">——</el-col>
				   	<el-col :span="3">
					   <el-input v-model="editBaseform.State" :label-width="formLabelWidth"></el-input>
					</el-col>
					  <el-col class="line" :span="1">——</el-col>
				    <el-col :span="11">
					   <el-select v-model="editBaseform.CountryID" placeholder="Please choose"  >
							  <el-option v-for="(item, index) in CountryArea" :key="index" :label="item.CountryName" :value="item.CountryID"></el-option>
					    </el-select>
				    </el-col> 
				 </el-form-item>
				 
				  <el-form-item label="CompanyAddress"  :label-width="formLabelWidth">
				    <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" v-model="editBaseform.CompanyAddress"></el-input>
				  </el-form-item>
				 <el-form-item label="Url" :label-width="formLabelWidth">
				   <el-input v-model="editBaseform.WEBUrl"  placeholder="Url" ></el-input>
				 </el-form-item>
				  <el-form-item label="CompanyInfo" :label-width="formLabelWidth">
				    <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" v-model="editBaseform.CompanyInfo"></el-input>
				  </el-form-item>
				   <el-form-item label="ProductInfo"  :label-width="formLabelWidth">
				    <el-input type="textarea"   :autosize="{ minRows: 2, maxRows: 4}" v-model="editBaseform.ProductInfo"></el-input>
				  </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="editBasedialogFormVisible = false">Cancel</el-button>
					    <el-button type="primary"  @click="editBaseSubmitForm('editBaseform')">Save</el-button>
					  </div>
				</el-dialog>
				
			</div>	
	</template>			
  </el-tab-pane>
  <el-tab-pane label="Company Address">
  		<template>
			<div class="spread con customer_index">
				<div>
					<div style="margin-top:10px;">
						<el-button  type="danger" icon="el-icon-tickets" @click="AddAddress()" >Add New</el-button>
						<el-button  type="danger" icon="el-icon-tickets" @click="AddressView()">Edit</el-button>
						<el-button  type="danger" icon="el-icon-tickets" @click="AddressDel()">Delete</el-button>
					</div>
				</div>
				<el-table 
					v-loading="loading"
					element-loading-text="Loading"
				    :data="tableDataAddress"
				    style="width: 100%"
					:height="tableHeight"
					 ref="addressTable"
				    border
				    fit
				    highlight-current-row
		    		@current-change="addressCurrentChange"
				   >
				    <el-table-column
				      label="CompanyName" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.CompanyName }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="CompanyName2" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.CompanyName2 }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="ContactName" width="200">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.ContactName }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="Phone"  width="120">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Phone }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Fax"  width="100">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Fax }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="Address" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Address }}</span>
				      	</template>
				    </el-table-column>
				   <el-table-column
				      label="UpdatedDate" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ isTimeString(scope.row.updatedDate) }}</span>
				      	</template>
				    </el-table-column>
				  </el-table>
				  
				  <el-dialog title="Add New Company Address" :visible.sync="dialogFormVisible">
					  <el-form :model="form" :rules="rules" ref="form" >
					    <el-form-item label="CompanyName"  prop="CompanyName" :label-width="formLabelWidth">
					      <el-input v-model="form.CompanyName" ></el-input>
					    </el-form-item>
					    <el-form-item label="CompanyName2" :label-width="formLabelWidth">
					      <el-input v-model="form.CompanyName2" ></el-input>
					    </el-form-item>
					    <el-form-item label="Country" prop="CountryID" :label-width="formLabelWidth">
					      <el-select v-model="form.CountryID" placeholder="Please choose"  >
							  <el-option v-for="(item, index) in CountryArea" :key="index" :label="item.CountryName" :value="item.CountryID"></el-option>
					      </el-select>
					    </el-form-item>
					    <el-form-item label="ZipCode" :label-width="formLabelWidth">
					      <el-input v-model="form.ZipCode" ></el-input>
					    </el-form-item>
					    <el-form-item label="State" :label-width="formLabelWidth">
					      <el-input v-model="form.State" ></el-input>
					    </el-form-item>
					    <el-form-item label="City" :label-width="formLabelWidth">
					      <el-input v-model="form.City"></el-input>
					    </el-form-item>
					    <el-form-item label="Phone" :label-width="formLabelWidth">
					      <el-input v-model="form.Phone" ></el-input>
					    </el-form-item>
					    <el-form-item label="Fax" :label-width="formLabelWidth">
					      <el-input v-model="form.Fax" ></el-input>
					    </el-form-item>
					    <el-form-item label="ContactName"  prop="ContactName" :label-width="formLabelWidth">
					      <el-input v-model="form.ContactName"></el-input>
					    </el-form-item>
					    <el-form-item label="Address" :label-width="formLabelWidth">
					       <el-input type="textarea"   :autosize="{ minRows: 2, maxRows: 4}" v-model="form.Address"></el-input>
					    </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">Cancel</el-button>
					    <el-button type="primary"  @click="submitForm('form')">Save</el-button>
					  </div>
				</el-dialog>
				
				
				
				<el-dialog title="Edit Company Address" :visible.sync="editdialogFormVisible">
					  <el-form :model="editform" :rules="rules" ref="editform" >
					    <el-form-item label="BizCompanyName"  prop="BizCompanyName" :label-width="formLabelWidth">
					      <el-input v-model="editform.BizCompanyName" ></el-input>
					    </el-form-item>
					    <el-form-item label="BizCompanyName2" :label-width="formLabelWidth">
					      <el-input v-model="editform.BizCompanyName2" ></el-input>
					    </el-form-item>
					    <el-form-item label="Country" prop="CountryID" :label-width="formLabelWidth">
					      <el-select v-model="editform.CountryID" placeholder="Please choose"  >
							  <el-option v-for="(item, index) in CountryArea" :key="index" :label="item.CountryName" :value="item.CountryID"></el-option>
					      </el-select>
					    </el-form-item>
					    <el-form-item label="ZipCode" :label-width="formLabelWidth">
					      <el-input v-model="editform.ZipCode" ></el-input>
					    </el-form-item>
					    <el-form-item label="State" :label-width="formLabelWidth">
					      <el-input v-model="editform.State" ></el-input>
					    </el-form-item>
					    <el-form-item label="City" :label-width="formLabelWidth">
					      <el-input v-model="editform.City"></el-input>
					    </el-form-item>
					    <el-form-item label="Phone" :label-width="formLabelWidth">
					      <el-input v-model="editform.Phone" ></el-input>
					    </el-form-item>
					    <el-form-item label="Fax" :label-width="formLabelWidth">
					      <el-input v-model="editform.Fax" ></el-input>
					    </el-form-item>
					    <el-form-item label="ContactName"  prop="ContactName" :label-width="formLabelWidth">
					      <el-input v-model="editform.ContactName"></el-input>
					    </el-form-item>
					    <el-form-item label="AddressLine" :label-width="formLabelWidth">
					       <el-input type="textarea"   :autosize="{ minRows: 2, maxRows: 4}" v-model="editform.AddressLine"></el-input>
					    </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="editdialogFormVisible = false">Cancel</el-button>
					    <el-button type="primary"  @click="EditsubmitForm('editform')">Save</el-button>
					  </div>
				</el-dialog>
				  
			</div>
		</template>
  
  
  </el-tab-pane>
  <el-tab-pane label="Contacts">
  		<template>
			<div class="spread con customer_index">
				<div>
					<div style="margin-top:10px;">
						<el-button  type="danger" icon="el-icon-tickets" @click="AddContact()">Add New</el-button>
						<el-button  type="danger" icon="el-icon-tickets" @click="ContactView()">Edit </el-button>
						<el-button  type="danger" icon="el-icon-tickets" @click="ContactDel()">Delete</el-button>
					</div>
				</div>
				
				<el-table 
					v-loading="loading"
					element-loading-text="Loading"
				    :data="tableData"
				    style="width: 100%"
					:height="tableHeight"
					 ref="contactsTable"
				    border
				    fit
				    highlight-current-row
		    		@current-change="CurrentChangeContacts"
				   >
					<el-table-column
				      label="ContactName" width="140">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.ContactName }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Email" width="200">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Email }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Phone1" width="150">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Phone1 }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Phone2" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Phone2 }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Fax" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Fax }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="Mobile1" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Mobile1 }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="AddressLine" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.AddressLine }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="JobTitle" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.JobTitle }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="Department" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Department }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="createdBy" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.createdByName }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="createdDate" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ isTimeString(scope.row.createdDate) }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="UpdatedBy" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.UpdatedbyName }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="UpdatedDate" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ isTimeString(scope.row.UpdatedDate) }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="status" width="150">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.ContactStatusName }}</span>
				      	</template>
				    </el-table-column>
				  </el-table>  
				  
				  <!-- contacts ADD  -->
				   <el-dialog title="Add New Contact" :visible.sync="dialogFormVisible">
					  <el-form :model="Contactform" :rules="rules" ref="Contactform" >
					     <el-form-item label="ContactName"  prop="ContactName" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.ContactName"></el-input>
					    </el-form-item>
					    
					    <el-form-item label="Gender" prop="Gender" :label-width="formLabelWidth">
					      <el-select v-model="Contactform.Gender" placeholder="Please choose"  >
					      	  <el-option label="NoInfo" :value="1"></el-option>
							  <el-option label="Mr" :value="2"></el-option>
				              <el-option label="Ms" :value="3"></el-option>
				              <el-option label="Mrs" :value="4"></el-option>
					      </el-select>
					    </el-form-item>
					    
					    <el-form-item label="Nickname" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Nickname" ></el-input>
					    </el-form-item>
					    <el-form-item label="JobTitle" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.JobTitle" ></el-input>
					    </el-form-item>
					    <el-form-item label="Department" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Department" ></el-input>
					    </el-form-item>
					    <el-form-item label="Phone1"  prop="Phone1"  :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Phone1" ></el-input>
					    </el-form-item>
					    <el-form-item label="Phone2" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Phone2"></el-input>
					    </el-form-item>
					    <el-form-item label="Fax" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Fax" ></el-input>
					    </el-form-item>
					     
					    <el-form-item label="Mobile1" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Mobile1" ></el-input>
					    </el-form-item>
					    <el-form-item label="Mobile2" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Mobile2" ></el-input>
					    </el-form-item>
					     
					    <el-form-item label="Email" prop="Email"  :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Email" ></el-input>
					    </el-form-item>
					   <el-form-item label="PersonalEmail" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.PersonalEmail" ></el-input>
					    </el-form-item>
					    <el-form-item label="IMAddress" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.IMAddress" ></el-input>
					    </el-form-item>
					    <el-form-item label="AddressLine" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.AddressLine" ></el-input>
					    </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">Cancel</el-button>
					    <el-button type="primary"  @click="contactsubmitForm('Contactform')">Save</el-button>
					  </div>
				</el-dialog>
				
				<!-- Contacts Edit   -->
				<el-dialog title="Add New Contact" :visible.sync="editContactdialogFormVisible">
					  <el-form :model="editContactform" :rules="rules" ref="editContactform" >
					     <el-form-item label="ContactName"  prop="ContactName" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.ContactName"></el-input>
					    </el-form-item>
					    
					    <el-form-item label="Gender" prop="Gender" :label-width="formLabelWidth">
					      <el-select v-model="editContactform.Gender" placeholder="Please choose"  >
							  <el-option label="Sir" :value="1"></el-option>
				              <el-option label="Ma'am" :value="2"></el-option>
				              <el-option label="Secrecy" :value="3"></el-option>
					      </el-select>
					    </el-form-item>
					    
					    <el-form-item label="NickName" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Nickname" ></el-input>
					    </el-form-item>
					    <el-form-item label="JobTitle" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.JobTitle" ></el-input>
					    </el-form-item>
					    <el-form-item label="Department" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Department" ></el-input>
					    </el-form-item>
					    <el-form-item label="Phone1"  prop="Phone1"  :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Phone1" ></el-input>
					    </el-form-item>
					    <el-form-item label="Phone2" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Phone2"></el-input>
					    </el-form-item>
					    <el-form-item label="Fax" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Fax" ></el-input>
					    </el-form-item>
					     
					    <el-form-item label="Mobile1" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Mobile1" ></el-input>
					    </el-form-item>
					    <el-form-item label="Mobile2" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Mobile2" ></el-input>
					    </el-form-item>
					     
					    <el-form-item label="Email" prop="Email"  :label-width="formLabelWidth">
					      <el-input v-model="editContactform.Email" ></el-input>
					    </el-form-item>
					   <el-form-item label="PersonalEmail" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.PersonalEmail" ></el-input>
					    </el-form-item>
					    <el-form-item label="IMAddress" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.IMAddress" ></el-input>
					    </el-form-item>
					    <el-form-item label="AddressLine" :label-width="formLabelWidth">
					      <el-input v-model="editContactform.AddressLine" ></el-input>
					    </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="editContactdialogFormVisible = false">Cancel</el-button>
					    <el-button type="primary"  @click="editcontactsubmitForm('editContactform')">Save</el-button>
					  </div>
				</el-dialog>
				  
				  
			</div>
		</template>																	
  
  </el-tab-pane>
  
   <!--Controls --Start  -->
  <el-tab-pane label="Controls">
  		<template>
			<div class="spread con customer_index">
				<div>
					<div style="margin-top:10px;">
						<el-button  type="danger" icon="el-icon-tickets" @click="AddCustomerControl()">Add CustomerControl</el-button>
						<el-button  type="danger" icon="el-icon-tickets" @click="RemoveCustomerControl()">Remove CustomerControl</el-button>
					</div>
				</div>
				
				<el-table 
					v-loading="loading"
					element-loading-text="Loading"
				    :data="tableControl"
				    style="width: 100%"
					:height="tableHeight"
					 ref="controlTable"
				    border
				    fit
				    highlight-current-row
		    		@current-change="CurrentChangeControl"
				   >
					<el-table-column
				      label="Sales" width="140">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.employeeName }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Share Type" width="150">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.ShareTypeName }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Active" width="100">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.InActiveName }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Created By" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.createdByName }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Updated By" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.UpdatedByName }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="Created Date" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ isTimeString(scope.row.createdDate) }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Updated Date" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ isTimeString(scope.row.UpdatedDate) }}</span>
				      	</template>
				    </el-table-column>
				    
				  </el-table>  
				  
				  <!-- controls ADD  -->
				   <el-dialog title="Add CustomerControl" :visible.sync="dialogCustomerControl">
					  
					  <el-form>
				  	 	 <el-form-item >
					  		 <el-checkbox-group v-model="customerControl">
					     	 	<el-checkbox v-for="(item,index) in customerControlList"  v-model="item.employeeID" :label="item.employeeID" :key="item.employeeID">{{item.employeeName}}</el-checkbox>
						     </el-checkbox-group>   
						  </el-form-item>
						  
						  	<el-form-item>
						    	<el-button type="primary" @click="CustomerControlSave">Save</el-button>
						    	<el-button  @click="dialogCustomerControl = false">Cancel</el-button>
						  	</el-form-item>
						</el-form>
					  
				</el-dialog>
			</div>
		</template>																	
  
  </el-tab-pane>
  
  
  
  <!--Class --分类  -->
    <el-tab-pane label="Class">
		<el-form>
  	 	 <el-form-item >
	  		 <el-checkbox-group v-model="Class">
	     	 	<el-checkbox v-for="(item,index) in ClassList"  v-model="item.CompanyClassID" :label="item.CompanyClassID" :key="item.CompanyClassID">{{item.ClassName}}</el-checkbox>
		     </el-checkbox-group>   
		  </el-form-item>
		  
		  	<el-form-item>
		    	<el-button type="primary" @click="ClassSave">Save</el-button>
		    	<el-button>Cancel</el-button>
		  	</el-form-item>
		</el-form>
		
		
  </el-tab-pane>
  
  
  
  <el-tab-pane label="TradeTerm">
		<el-form>
  	 	 <el-form-item >
	  		 <el-checkbox-group v-model="TradeTerm">
	     	 	<el-checkbox v-for="(item,index) in TradeList"  v-model="item.TradeTermID" :label="item.TradeTermID" :key="item.TradeTermID">{{item.TradeTerm}}</el-checkbox>
		     </el-checkbox-group>   
		  </el-form-item>
		  
		  	<el-form-item>
		    	<el-button type="primary" @click="TradeSave">Save</el-button>
		    	<el-button>Cancel</el-button>
		  	</el-form-item>
		</el-form>
		
		
  </el-tab-pane>
  <el-tab-pane label="PaymentTerm">
  	  <el-form>
  	 	 <el-form-item >
	  		 <el-checkbox-group v-model="PaymentTerm">
	     	 	<el-checkbox v-for="(item,index) in PaymentList"  v-model="item.PaymentTermID" :label="item.PaymentTermID" :key="item.PaymentTermID">{{item.PaymentTerm}}</el-checkbox>
		     </el-checkbox-group>   
		  </el-form-item>
		  
		  	<el-form-item>
		    	<el-button type="primary" @click="paymentSave">Save</el-button>
		    	<el-button>Cancel</el-button>
		  	</el-form-item>
		</el-form>
 
    </el-tab-pane>
    
 
<!-- RFQS  -->
<el-tab-pane label="RFQs">
  		<template>
			<div class="spread con customer_index">
				<el-table 
					v-loading="loading"
					element-loading-text="Loading"
				    :data="tableRFQData"
				    style="width: 100%"
					:height="tableHeight"
					 ref="RFQsTable"
				    border
				    fit
				    highlight-current-row
		    		@current-change="CurrentChangeRFQ"
				   >
					<el-table-column
				      label="Status" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.StatusName }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="QN" width="90">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.QuoteNum }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Sales Rep" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.employeeName }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="CustomerName" width="160">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.CompanyName }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Buyer" width="150">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.PurchReps }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Brand" width="100">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.BrandName }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="PartNo" width="180">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.PartNo }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="AddressLine" width="140">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.AddressLine }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="Qty" width="100">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Quantity }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="Target Price" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.TargetPrice }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="D/C" width="80">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.DateCode }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="LeadFree" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.LeadFreeName  }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="Remark" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Remarks }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="CreatedDate" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ isTimeString(scope.row.CreatedDate) }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="Office" width="150">
				      	<template slot-scope="scope">
				        	<span></span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="Package" width="150">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Package }}</span>
				      	</template>
				    </el-table-column>
			  </el-table>  	
			</div>
		</template>															
</el-tab-pane>   
    
<!-- SalesOrders  -->
<el-tab-pane label="SalesOrders">
  		<template>
			<div class="spread con customer_index">
				<el-table 
					v-loading="loading"
					element-loading-text="Loading"
				    :data="tableSaleOrderData"
				    style="width: 100%"
					:height="tableHeight"
					 ref="SaleOrderTable"
				    border
				    fit
				    highlight-current-row
		    		@current-change="CurrentChangeSaleOrder"
				   >
					<el-table-column
				      label="ItemStatus" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.Status }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Order No" width="90">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.SalesOrderNo_no }}</span>
				      	</template>
				    </el-table-column>	
				    <el-table-column
				      label="Customer Name" width="120">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.CustomerName }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="CustomerName" width="160">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.CompanyName }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Ship Date" width="100">
				      	<template slot-scope="scope">
				        	<span >{{ isTimeString(scope.row.ShipDate) }}</span>
				      	</template>
				    </el-table-column>
				    
				    <el-table-column
				      label="SalesRep" width="180">
				      	<template slot-scope="scope">
				        	<span >{{ scope.row.employeeName_SalesRepID }}</span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      label="Brand Alias" width="140">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.AddressLine }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="Part No" width="100">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Quantity }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="OrderQty Price" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.TargetPrice }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="ShipQty" width="80">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.DateCode }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="PriceEach" width="120">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.LeadFreeName  }}</span>
				      	</template>
				    </el-table-column>
				     <el-table-column
				      label="Amount" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Remarks }}</span>
				      	</template>
				    </el-table-column>
				    
				     <el-table-column
				      label="ItemDesc" width="200">
				      	<template slot-scope="scope">
				        	<span>{{ scope.row.Remarks }}</span>
				      	</template>
				    </el-table-column>
				     
			  </el-table>  	
			</div>
		</template>															
</el-tab-pane>   
    
</el-tabs>
</template>

<script>
  export default {
    data() {
     return {
	    TradeList:[],
	    ClassList:[],
	    Class:[],
	    PaymentList:[],	
		TradeTerm:[],
		PaymentTerm:[],
		
		customerControlList:[],
		customerControl:[],
		loading:false,
		tableData: [],
		tableHeight: window.innerHeight - 403 < 560 ? 700 : (window.innerHeight - 403),
		token:"",
		listQuery:{sortby:'',order:'desc'},
		
		tableDataAddress:[],
		contactsTable:[],
		tableSaleOrderData:[],
		tableRFQData:[],
		tableControl:[],
		dialogFormVisible: false,
		formLabelWidth: '160px',
		editdialogFormVisible:false, 
		editContactdialogFormVisible:false,
		editBasedialogFormVisible:false,
		dialogCustomerControl:false,
		form: {
	      CompanyName: '',
	      CompanyName2: '',
	      CountryID: '',
	      ContactName:'',
	      Fax: '',
	      Phone:'',
	      Address:'',
	      State:'',
	      City:'',
	      ZipCode:'',
	      Country:''
	      
	      },
	      editform:{
	     	  BizCompanyID:0,
	      	  CompanyName: '',
		      CompanyName2: '',
		      CountryID: '',
		      ContactName:'',
		      Fax: '',
		      Phone:'',
		      Address:'',
		      State:'',
		      City:'',
		      ZipCode:'',
		      Country:'',
		      BizCompanyName2:'',
		      BizCompanyName:'',
		      AddressLine:'',
	      },
	      Contactform:{
	      	ContactName:'',
			Gender:1,
			Nickname:'',
			JobTitle:'',
			Department:'',
			Phone1:'',
			Phone2:'',
			Fax:'',
			Mobile1:'',
			Mobile2:'',
			Email:'',
			PersonalEmail:'',
			IMAddress:'',
			AddressLine:''
	      
	      },
	     editContactform:{
	      	ContactName:'',
			Gender:1,
			Nickname:'',
			JobTitle:'',
			Department:'',
			Phone1:'',
			Phone2:'',
			Fax:'',
			Mobile1:'',
			Mobile2:'',
			Email:'',
			PersonalEmail:'',
			IMAddress:'',
			AddressLine:'',
	        CompanyID:'',
	      }, 
	   editBaseform:{
	   		ProductInfo: '',
			CompanyAlias:'',
			CompanyName:'',
			CountryID:'',
			Url:'',
			CompanyInfo:'',
			City:'',
			CompanyName2:'',
			CompanyAddress:'',
			State:'',
	   },
	   currentRow:{},
	   currentRowAddress:'',
	   //currentRowAddress:{},
	   currentRowContacts:'',
	   currentRowControl:'',
	   currentRowRFQ:'',
	   currentRowSaleOrder:'',
       CountryArea:[],
       rules: {
          CompanyName:[
		            { required: true, message: 'Please enter CompanyName', trigger: 'blur' },
		            { min: 3, max: 55, message: '3 to 35 characters in length', trigger: 'blur' }
		          ],
		  ContactName: [
			            { required: true, message: 'Please enter ContactName', trigger: 'blur' },
			            { min: 2, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
			          ],
		 CountryID: [
	            { required: true, message: 'Please choose Country', trigger: 'change' }
	          ], 
	     Gender: [
	            { required: true, message: 'Please choose Gender', trigger: 'change' }
	          ],      
	     Phone1: [
	             { required: true, message: 'Please enter Phone1', trigger: 'blur' },
			     { min: 7, max: 20, message: '7 to 20 characters in length', trigger: 'blur' }
	          ],  
	      Email: [
	             { required: true, message: 'Please enter Email', trigger: 'blur' },
			     { min: 3, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
	          ],
	      CompanyAlias:[
		            { required: true, message: 'Please enter CompanyAlias', trigger: 'blur' },
		            { min: 3, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
		          ],
	                             
          },
            
      }
     
    },
    
    created(){
			this.getPaymentTerm();
			this.getTradeList();
			this.getClassList();
			this.getCustomerControlList();
			this.getCompanyAddress();
			this.getContacts();
			this.getCountry();
			this.getTradetermLink();
			this.getPaymentTermLink();
			this.getcompanyclasslink();
			this.getRFQ();
			this.getCustomerControlRoles();
			//this.getSaleOrder();
		},
    methods: {
      getCompanyAddress(){
			this.loading = true;
			var CompanyID =this.$route.query.CompanyID; 
			axios.get('/api/customer/companyaddress?CompanyID='+CompanyID).then(result => {
					if (result.data.code == 200) {
						this.tableDataAddress = result.data.result;
						for(let i=0;i<this.tableDataAddress.length;i++){
							 this.tableDataAddress[i].CompanyName = this.tableDataAddress[i].BizCompanyName;
							 this.tableDataAddress[i].CompanyName2 = this.tableDataAddress[i].BizCompanyName2;
							 this.tableDataAddress[i].Address = this.tableDataAddress[i].AddressLine;
						}
						this.loading = false;
					} else {
						this.$notify.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: 'Error',
						message: 'Error',
					});
				});
			},
			
      getContacts(){
      	this.loading = true;
      	var CompanyID =this.$route.query.CompanyID; 
			axios.get('/api/companycontact?CompanyID='+CompanyID).then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result;
						this.loading = false;
					} else {
						this.$notify.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: 'Error',
						message:'ERROR'
					});
				});
      },      
      
       getTradeList(){
				axios.get('/api/customer/tradeterm').then(result => {
					this.TradeList = result.data.result;
				});
		    },
		    
		getClassList(){
			axios.get('/api/companyclass').then(result => {
					this.ClassList = result.data.result;
				});
		},
		getCustomerControlList(){
	      	this.loading = true;
	      	var CustomerID =this.$route.query.CustomerID; 
				axios.get('/customerControlList?CustomerID='+CustomerID).then(result => {
						if (result.data.code == 200) {
							this.tableControl = result.data.result;
							this.loading = false;
						} else {
							this.$notify.error({
								title: 'Error',
								message: result.data.message
							});
						}
					})
					.catch(error => {
						this.$notify.error({
							title: 'Error',
							message: 'ERROR'
						});
					});
   		   },
	   getCustomerControlRoles(){
	   		axios.get('/customerControlRoles').then(result => {
				this.customerControlList = result.data.result;
			});
	   },     
	   
	   getSaleOrder(){
	  		this.loading = true;
	      	var CustomerID =this.$route.query.CustomerID; 
				axios.get('/api/sale/activesale?CustomerID='+CustomerID).then(result => {
						if (result.data.code == 200) {
							this.tableSaleOrderData = [];
							this.loading = false;
						} else {
							this.$notify.error({
								title: 'Error',
								message: result.data.message
							});
						}
					})
					.catch(error => {
						this.$notify.error({
							title: 'Error',
							message: 'ERROR'
						});
					});
	   }, 
		    
     getPaymentTerm(){
		axios.get('/api/customer/paymentterm').then(result => {
			this.PaymentList = result.data.result;
		});
    },
    getCountry(){
				axios.get('/api/country').then(result => {
					this.CountryArea = result.data.result;
				});
			
			},
	getTradetermLink(){
		var CompanyID =this.$route.query.CompanyID; 
				axios.get('/api/tradetermlink?CompanyID='+CompanyID).then(result => {
					this.TradeTerm = result.data.result;
				});
			
			},
	getPaymentTermLink(){
		var CompanyID =this.$route.query.CompanyID; 
				axios.get('/api/paymenttermlink?CompanyID='+CompanyID).then(result => {
					this.PaymentTerm = result.data.result;
				});
			
			},	
	getcompanyclasslink(){
			var CompanyID =this.$route.query.CompanyID; 
				axios.get('/api/companyclasslink?CompanyID='+CompanyID).then(result => {
					this.Class = result.data.result;
				});
			
			},	
			
	submitForm(formName){
		 this.$refs[formName].validate((valid) => {
          if (valid) {
            var CompanyID =this.$route.query.CompanyID; 
          	axios.post('/api/customer/companyaddressedit',this.form)
          	.then(result => {
					if (result.data.code == 200) {
						this.dialogFormVisible = false;
						this.getCompanyAddress();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
          } else {
            this.$message.error({
						title: 'Error',
						message: 'Please enter *'
					});
            return false;
          }
        });
	
	},	
	
	EditsubmitForm(formName){
		this.$refs[formName].validate((valid) => {
          if (valid) {
        	 axios.post('/api/customer/companyaddressedit',this.editform)
          	.then(result => {
					if (result.data.code == 200) {
						this.editdialogFormVisible = false;
						this.getCompanyAddress();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
          }else {
            this.$message.error({
						title: 'Error',
						message: 'Please enter *'
					});
            return false;
          }
		});
	
	},
	editBaseSubmitForm(formName){
		this.$refs[formName].validate((valid) => {
          if (valid) {
        	 axios.post('/api/customer/customeredit',{
        	 	CompanyID:this.$route.query.CompanyID,
        	 	pagram:this.editBaseform,
          	})
          	.then(result => {
					if (result.data.code == 200) { 
						this.editBasedialogFormVisible = false;
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
          }else {
            this.$message.error({
						title: 'Error',
						message: 'Please enter *'
					});
            return false;
          }
		});
	
	},
	contactsubmitForm(formName){
		 var CompanyID =this.$route.query.CompanyID; 
		 
		 //var  reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
		 var reg=/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/ ;
		 if(!reg.test(this.Contactform.Email)){
		 	 this.$message.error("Emial");
         	 return;
		 }
		this.$refs[formName].validate((valid) => {
          if (valid) {
        	 axios.post('/api/customer/contactsadd',{
        	 	CompanyID:CompanyID,
        		ContactName:this.Contactform.ContactName,
        		Gender:this.Contactform.Gender,
          		Nickname:this.Contactform.Nickname,
          		JobTitle:this.Contactform.JobTitle,
          		Department:this.Contactform.Department,
          		Phone1:this.Contactform.Phone1,
          		Phone2:this.Contactform.Phone2,
          		Fax:this.Contactform.Fax,
          		Mobile1:this.Contactform.Mobile1,
          		Mobile2:this.Contactform.Mobile2,
          		Email:this.Contactform.Email,
          		PersonalEmail:this.Contactform.PersonalEmail,
          		IMAddress:this.Contactform.IMAddress,
          		AddressLine:this.Contactform.AddressLine
          	})
          	.then(result => {
					if (result.data.code == 200) {
						this.dialogFormVisible = false;
						this.getContacts();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
          }else {
            this.$message.error({
						title: 'Error',
						message: 'Please enter *'
					});
            return false;
          }
		});	
	
	},
	editcontactsubmitForm(formName){
		this.$refs[formName].validate((valid) => {
          if (valid) {
        	 axios.post('/api/customer/contactsedit',this.editContactform)
          	.then(result => {
					if (result.data.code == 200) {
						this.editContactdialogFormVisible = false;
						this.getContacts();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
          }else {
            this.$message.error({
						title: 'Error',
						message: 'Please enter *'
					});
            return false;
          }
		});
	
	},		
    handleClick(tab, event){
    
    	// console.log(tab, event);
    },
     BaseEdit(){
     	 	var CompanyID =this.$route.query.CompanyID; 
    	axios.get('/api/customer/customerdetail?CompanyID='+CompanyID).then(result => {
					if (result.data.code == 200) {
						this.editBaseform = result.data.result;
						this.editBasedialogFormVisible = true;
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
     	 
     
     },
    
    TradeSave(){
     var CompanyID =this.$route.query.CompanyID; 
    		axios.post('/api/customer/tradetermadd', {
							TradeTermID  : this.TradeTerm,
							CompanyID : CompanyID,
							
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								
							}
						  	
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Error',
							    message: 'ERROR',
							  });
						  })
    },
    
    ClassSave(){
    	var CompanyID =this.$route.query.CompanyID; 
    		axios.post('/api/customer/classadd', {
							CompanyClassID  : this.Class,
							CompanyID : CompanyID,
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
							}
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Error',
							    message: 'ERROR',
							  });
						  })
    
    
    
    },
    
    paymentSave(){
    	var CompanyID =this.$route.query.CompanyID; 
    		axios.post('/api/customer/paymenttermadd', {
							PaymentTermID  : this.PaymentTerm,
							CompanyID : CompanyID,
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								
							}
						  	
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Error',
							    message: 'ERROR',
							  });
						  })
    	
    },
    
    AddContact(){
    	this.dialogFormVisible = true;
    },
    ContactView(){
    	 if (!this.currentRowContacts ) {
			this.$notify({ type: 'error', message: 'Please choose one line.' });
			return false;
		}
    	 this.editContactform = this.currentRowContacts;
   		/* this.editContactform.Gender = this.currentRow.Gender;
   		 this.editContactform.Nickname = this.currentRow.Nickname;
   		 this.editContactform.JobTitle = this.currentRow.JobTitle;
   		 this.editContactform.Department = this.currentRow.Department;
   		 this.editContactform.Phone1 = this.currentRow.Phone1;
   		 this.editContactform.Phone2 = this.currentRow.Phone2;
   		 this.editContactform.Fax = this.currentRow.Fax;     
   		 this.editContactform.Mobile1 = this.currentRow.Mobile1;
   		 this.editContactform.Mobile2 = this.currentRow.Mobile2;
   		 this.editContactform.Email = this.currentRow.Email;
   		 this.editContactform.PersonalEmail = this.currentRow.PersonalEmail;
   		 this.editContactform.IMAddress = this.currentRow.IMAddress;
   		 this.editContactform.AddressLine = this.currentRow.AddressLine;
   		 this.editContactform.CompanyContactID = this.currentRow.CompanyContactID; */
   		 this.editContactdialogFormVisible = true;
    },
    
    ContactDel(){
    	var CompanyContactID = this.currentRowContacts.CompanyContactID;
    	axios.get('/api/customer/contactsdel?CompanyContactID='+CompanyContactID).then(result => {
					if (result.data.code == 200) {
						this.$message.error({
							title: 'Success',
							message: result.data.message
						});
						this.getContacts();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
    },
    
    AddAddress(){
    	var CompanyID =this.$route.query.CompanyID; 
    	axios.get('/api/customer/companyaddressdetail?CompanyID='+CompanyID).then(result => {
					if (result.data.code == 200) {
						this.form = result.data.result;
						this.dialogFormVisible = true;
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
    },
   AddressView(){
	if (!this.currentRowAddress ) {
			this.$notify({ type: 'error', message: 'Please choose one line.' });
			return false;
		}
   		 this.editform = this.currentRowAddress;
   		/* this.editform.CompanyName2 = this.currentRowAddress.CompanyName2;
   		 this.editform.CompanyID = this.currentRowAddress.CompanyID;
   		 this.editform.CountryID = this.currentRowAddress.CountryID;
   		 this.editform.ZipCode = this.currentRowAddress.ZipCode;
   		 this.editform.State = this.currentRowAddress.State;
   		 this.editform.City = this.currentRowAddress.City;
   		 this.editform.Phone = this.currentRowAddress.Phone;     
   		 this.editform.Fax = this.currentRowAddress.Fax;
   		 this.editform.ContactName = this.currentRowAddress.ContactName;
   		 this.editform.Address = this.currentRowAddress.Address;
   		 this.editform.CompanyAddressId = this.currentRowAddress.CompanyAddressId; */
   		 
   		 this.editdialogFormVisible = true;
   		
    },
   
   AddressDel(){
    if (!this.currentRowAddress ) {
			this.$notify({ type: 'error', message: 'Please choose one line.' });
			return false;
		}
       var BizCompanyID = this.currentRowAddress.BizCompanyID;
    	axios.get('/api/customer/companyaddressdel?BizCompanyID='+BizCompanyID).then(result => {
					if (result.data.code == 200) {
						this.$message.error({
							title: 'Success',
							message: result.data.message
						});
						this.getCompanyAddress();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
    },
    
    addressCurrentChange(val){
    	 this.currentRowAddress = val;
    },
    
    CurrentChangeContacts(val){
    	 this.currentRowContacts = val;
    },
    CurrentChangeControl(val){
    	 this.currentRowControl = val;
    },
    
   CurrentChangeRFQ(val) {
	        this.currentRowRFQ = val;
	},
	
	CurrentChangeSaleOrder(val){
		 this.currentRowSaleOrder = val;
	},
	
	getRFQ(){
      	this.loading = true;
      	var CompanyID =this.$route.query.CompanyID; 
      	var CustomerID =this.$route.query.CustomerID; 
			axios.get('/api/RFQList?CompanyID='+CompanyID+'&CustomerID='+CustomerID ).then(result => {
					if (result.data.code == 200) {
						this.tableRFQData = result.data.result;
						this.loading = false;
					} else {
						this.$notify.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: 'Error',
						message: 'ERROR'
					});
				});
      }, 
      
      AddCustomerControl(){
      		this.dialogCustomerControl = true;
      },
      CustomerControlSave(){
      		var CustomerID =this.$route.query.CustomerID; 
    		axios.post('/customerControlSave', {
							EmployeeIDs  : this.customerControl,
							CustomerID : CustomerID,
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								
								this.dialogCustomerControl = false;
								this.getCustomerControlList();
								this.customerControl=[];
							}
						  	
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Error',
							    message: 'ERROR',
							  });
						  })
      	
      },
      RemoveCustomerControl(){
      		if (!this.currentRowControl ) {
			this.$notify({ type: 'error', message: 'Please choose one line.' });
			return false;
		}
        var CustomerControlID = this.currentRowControl.CustomerControlID;
    	axios.get('/customerControlRemove?CustomerControlID='+CustomerControlID).then(result => {
					if (result.data.code == 200) {
						this.$message.success({
							title: 'Success',
							message: result.data.message
						});
						this.getCustomerControlList();
					} else {
						this.$message.error({
							title: 'Error',
							message: result.data.message
						});
					}
				})
      },
	
	shandleCurrentChange(data) {
	        this.currentRow = data;
	},
	isTimeString(time){
    	if(time=='' || time== null || time=='undefined'){
    	 return '';
    	}else{
    		return time.date.substring(0,10);
    	}
    },
    }
    
  };
</script>